import React, { useState, useEffect } from 'react';
import axios from 'axios'
import Upload from './components/Upload/upload'

const App: React.FC = () => {
  const handleChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files) {
      const uploadedFile = files[0]
      const formData = new FormData()
      formData.append(uploadedFile.name, uploadedFile)
      axios.post('', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res)
      })
    }
  }
  const checkFileSize = (file: File) => {
    if (Math.round(file.size / 1024) > 50) {
      alert('file too big')
      return false
    }
    return true
  }
  // 重命名
  const filePromise = (file: File) => {
    const newFile = new File(['file'], 'new_name.docx', {
      type: file.type
    })
    return Promise.resolve(newFile)
  }
  const changed = () => {
    return null
  }
  return (
    <div className="App">
      <Upload
        action=""
        onChange={() => changed}
        beforeUpload={checkFileSize}
      />
      <input type="file" name="myFile" onChange={handleChangeFile} />
    </div>
  )
}

export default App;
